import { useEffect, useState } from "react";
import { Layout, Menu } from "antd";
import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { findSiderRouter } from "@/routes";
import type { TRoutes } from "@/routes";
import "./index.less";
import { useLocation, useNavigate } from "react-router-dom";
const { Sider } = Layout;
export default function IndexSider() {
    const navigate = useNavigate();
    const location = useLocation();
    // console.log(location.pathname);// /cmn/dict
    // console.log(location.pathname.split("/"));// ["","cmn","dict"]
    // console.log(location.pathname.split("/").filter(v=>v));// ['cmn', 'dict']
    const [keys, setKeys] = useState("/" + (location.pathname.split("/").filter(v => v)[0] || ""));

    const [collapsed, setCollapsed] = useState(false);
    type MenuItem = Required<MenuProps>['items'][number];
    function getItem(
        label: React.ReactNode,
        key: React.Key,
        icon?: React.ReactNode,
        children?: MenuItem[],
    ): MenuItem {
        return {
            key,
            icon,
            children,
            label,
        } as MenuItem;
    }

    const routes: TRoutes = findSiderRouter();

    // 指定侧边栏 数据列表的
    const items = routes.map(item => {
        let subItem;
        // 是否有子项
        if (item.children) {
            subItem = item.children.filter(v => !v.isHide).map(subItem => {
                return getItem(subItem.title, subItem.path as any);
            })
        }
        return getItem(item.title, item.path as string, item.icon, subItem)
    })

    useEffect(() => {
        setKeys("/" + (location.pathname.split("/").filter(v => v)[0] || ""));
    }, [location.pathname])

    return (
        <Sider breakpoint="lg"  collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
            <div className="logo">
                <img src="/logo.png" alt="" />
                <span style={{display:collapsed?"none":"inline-block"}}>尚医通管理系统</span>
            </div>
            <Menu
                openKeys={[keys]}
                selectedKeys={[location.pathname]}
                onOpenChange={(openKeys) => {
                    console.log(1111, openKeys[1]);
                    setKeys(openKeys[1]);
                    // console.log("onOpenChange")
                }}
                onClick={({ key }) => {
                    navigate(key);
                }} theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
        </Sider>
    )
}